<template>
  <div>
    <div>浏览器支持的图片懒加载方式</div>
    <div>图片数量--{{ list.length }}张</div>

    <div>
      <ul>
        <li>
          当鼠标滑动特别快的时候， 会出现黄色的占位图-也可以是loading图，
          加载完毕后，使用真实的图片
        </li>
      </ul>
    </div>
    <div class="pic-container">
      <div v-for="(item, index) in list" :key="index" class="pic-item-wrap">
        <img class="pic-item" :src="item" :alt="item" loading="lazy" />
        <span>图片索引--{{ index + 1 }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'standard',
  data () {
    return {
      list: []
    }
  },
  created () {
    this.loadImgList()

    this.isSupportLazyLoad()
  },
  methods: {
    loadImgList () {
      let list = require.context('@/assets/picGroup', false, /\.(png|jpg|jpeg|gif)$/)

      list = list.keys()

      let arr = []

      list.forEach(item => {
        let fileName = item.slice(2)
        arr.push(require(`@/assets/picGroup/${fileName}`))
      })

      this.list = arr
    },

    /**
     * 默认是否支持懒加载
     */
    isSupportLazyLoad() {
      console.log('方式一：','loading' in document.createElement('img'))

      console.log('方式二：','loading' in new Image())

      console.log('方式三： ', 'loading' in HTMLImageElement.prototype)
    }
  }
}
</script>

<style lang="less" scoped>
.pic-container {
  min-height: 500px;
  border: 1px solid #000;

  .pic-item-wrap {
    display: flex;
    align-items: center;
    color: red;
  }
  .pic-item {
    width: 100px;
    height: 100px;
    padding: 10px 0;
    margin: 20px 0;
    margin-right: 10px;
    // 写一个默认的loading 图片进行占位，表示图片资源为加载时的样子
    // background: url() no-repeat;
    background: yellow;
  }
}
</style>